<template>
	<view>
		<!-- 加了fixed -->
		<view class="page_header">
			<view class="status-bar"></view>
			<view class="navtop">
				<image @click="back" src="/static/index/Back_icon.png" mode="widthFix" class="back_icon"></image>
				<text class="balance">任务详情</text>
				<!-- 右边自定义图片 -->
				<view @click="goaddcommodity" class="more">
					<text class="jia">+</text>
				</view>
			</view>
		</view>
		<!-- 没加fixed -->
		<view class="status-bar"></view>
		<view class="" style="height: 100rpx ;">
		</view>
		<view class="searchBox">
			<image class="search_icon" src="../../../static/dating/search_icon.png"></image>
			<text class="frame"></text>
			<input class="inpuat" type="text" placeholder="请输入关键词进行搜索" />
		</view>
		<view class="navbarBox">
			<view :class="{navBox:index==stylenum}" @click="qiehuan(index,item)" v-for="(item,index) in navbarData" :key="index">
				<view class="navFont">{{item.navbarContent}}</view>
			</view>
			
		</view>
		<view class="main">
			<view class="commodityBox" v-for="(item,index) in commodityData" :key="index">
				<image class="commodityImg" :src="item.commodityImg"></image>
				<view class="nameBox tuodiandiandian">
					{{item.commodityName}}
				</view>
				<text class="commodityPrice">￥{{item.commodityPrice}}</text>
				<text class="commodityNum">库存 {{item.commodityNum}}</text>
				<text class="cansel">{{item.cansel}}</text>
				<image class="upperShelf" v-if="stylenum==0" :src="item.upperShelf"></image>
				<image v-if="stylenum==1" class="lowerShelf" :src="item.lowerShelf"></image>
				<view @click="goAddquantity" v-if="stylenum==2" class="moreup">
					{{item.soldOut}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				stylenum: 0,
				navbarData:[{
					navbarContent:'上架'
				},
				{
					navbarContent:'下架'
				},
				{
					navbarContent:'售完'
				}],
				commodityData:[{
					commodityImg:'../../../static/shangcheng/chanping.png',
					commodityName:'Gucci印花兜帽卫衣',
					commodityPrice:'108.90',
					commodityNum:'1000',
					cansel:'x',
					upperShelf:'../../../static/user2/on.png',
					lowerShelf:'../../../static/user2/up.png',
					soldOut:'加量上架'
				},{
					commodityImg:'../../../static/shangcheng/chanping.png',
					commodityName:'Gucci印花兜帽卫衣',
					commodityPrice:'108.90',
					commodityNum:'1000',
					cansel:'x',
					upperShelf:'../../../static/user2/on.png',
					lowerShelf:'../../../static/user2/up.png',
					soldOut:'加量上架'
				},{
					commodityImg:'../../../static/shangcheng/chanping.png',
					commodityName:'Gucci印花兜帽卫衣',
					commodityPrice:'108.90',
					commodityNum:'1000',
					cansel:'x',
					upperShelf:'../../../static/user2/on.png',
					lowerShelf:'../../../static/user2/up.png',
					soldOut:'加量上架'
				},{
					commodityImg:'../../../static/shangcheng/chanping.png',
					commodityName:'Gucci印花兜帽卫衣',
					commodityPrice:'108.90',
					commodityNum:'1000',
					cansel:'x',
					upperShelf:'../../../static/user2/on.png',
					lowerShelf:'../../../static/user2/up.png',
					soldOut:'加量上架'
				},]
			};
		},
		methods: {
			back() {
				uni.navigateBack({
					delta: 1,
				})
			},
			qiehuan(index,item){
				this.stylenum=index
			},
			goAddquantity(){
				uni.navigateTo({
					url:'./addQuantity'
				})
				},
				goaddcommodity(){
					uni.navigateTo({
						url:'./productAddition'
					})
					}
		}
	}
</script>

<style>

	.more {
		width: 36rpx;
		height: 36rpx;
		border: 1rpx solid #333333;
		border-radius: 20rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #7322D8;
		font-weight: bold;
		position: absolute;
		right: 65rpx;
	}

	.jia {
		position: relative;
		top: -4rpx;
	}

	.searchBox {
		width: 710rpx;
		height: 60rpx;
		background: rgba(255, 255, 255, 1);
		border-radius: 30rpx;
		position: relative;
		top: 10rpx;
		left: 20rpx;
		display: flex;
	}

	.search_icon {
		width: 26rpx;
		height: 26rpx;
		position: absolute;
		top: 17rpx;
		left: 20rpx;
	}

	.frame {
		display: block;
		width: 2rpx;
		height: 20rpx;
		background: rgba(102, 102, 102, 1);
		position: absolute;
		top: 20rpx;
		left: 60rpx;
	}

	.inpuat {
		position: absolute;
		top: 8rpx;
		left: 74rpx;
	}

	.navbarBox {
		width: 750rpx;
		height: 85rpx;
		background: rgba(255, 255, 255, 1);
		position: relative;
		top: 25rpx;
		display: flex;
		justify-content: space-around;
	}

	.navBox {
		width: 80rpx;
		height: 80rpx;
		border-bottom: 6rpx solid #7322D8;
		position: relative;
		color: #7322D8;
	}

	.navFont {
		width: 80rpx;
		height: 80rpx;
		display: block;
		font-size: 28rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.main{
		width: 750rpx;
		position: relative;
		top: 55rpx;
	}
	.commodityBox{
		width:710rpx;
		height:180rpx;
		background:rgba(255,255,255,1);
		border-radius:20rpx;
		/* border: 1rpx solid red; */
		position: relative;
		left: 20rpx;
		margin-top: 10rpx;
		}
		.commodityImg{
			width: 120rpx;
			height: 120rpx;
			position: absolute;
			top: 25rpx;
			left: 22rpx;
		}
		.nameBox{
			width: 450rpx;
			position: absolute;
			top: 30rpx;
			left: 168rpx;
			font-size:26rpx;
			font-family:PingFang SC;
			font-weight:400;
			color:rgba(51,51,51,1);
		}
		.commodityPrice{
			font-size:30rpx;
			font-family:FZHei-B01S;
			font-weight:400;
			color:rgba(255,59,48,1);
			position: absolute;
			top: 100rpx;
			left: 160rpx;
			}
			.commodityNum{
				font-size:20rpx;
				font-family:PingFang SC;
				font-weight:400;
				color:rgba(142,142,142,1);
				position: absolute;
				top: 140rpx;
				left: 165rpx;
				}
				.cansel{
					color: #8E8E8E;
					position: absolute;
					top: 5rpx;
					right: 25rpx;
					}
				.upperShelf{
					width: 24rpx;
					height: 24rpx;
					position: absolute;
					right: 25rpx;
					bottom: 20rpx;
				}
				.lowerShelf{
					width: 24rpx;
					height: 24rpx;
					position: absolute;
					right: 25rpx;
					bottom: 20rpx;
				}
				.moreup{
					width:110rpx;
					height:40rpx;
					background:rgba(115,34,216,1);
					border-radius:20rpx;
					font-size:20rpx;
					font-family:PingFang SC;
					font-weight:100;
					color:rgba(255,255,255,1);
					display: flex;
					align-items: center;
					justify-content: center;
                    position: absolute;
                    right: 25rpx;
                    bottom: 20rpx;
					}
					
</style>
